<template>
  <div class="page">
    <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-input
            placeholder="姓名/昵称/微信号/电话号码"
            v-model="alone.searchForm.data.searchStr"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-cascader
            placeholder="请选择部门"
            v-model="alone.searchForm.data.departmentId"
            :props="orgCascaderCp.config.props"
            :options="orgSupAjax.data"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="alone.searchForm.data.roleId"
            placeholder="请选择角色"
          >
            <el-option
              v-for="item in roleSupAjax.data"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="alone.searchForm.data.type"
            placeholder="请选择用户类型"
          >
            <el-option
              v-for="item in alone.userType"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-cascader
            v-model="alone.searchForm.data.platformId"
            :props="platformCascaderCp.config.props"
            :options="allPlatformSupAjax.data"
            placeholder="请选择平台搜索"
          >
          </el-cascader>
        </el-form-item>
        <!-- <el-form-item>
          
          <el-select
            v-model="alone.searchForm.data.platformId"
            placeholder="请选择平台搜索"
          >
            <el-option
              v-for="item in $store.state.allPlatformList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="c-main p20">
      <div class="c-aside clearfix">
        <div class="fl">总共：{{ pageAjax.paging.total }} 条</div>
        <el-button
          type="primary"
          class="fr btn"
          @click="rNavToCreate"
          v-hasAuth:system_authorityCreateUser
          >新增</el-button
        >
      </div>
      <div class="c-section">
        <div class="c-body">
          <el-table :data="pageAjax.data" stripe style="width: 100%">
            <el-table-column prop="userName" label="用户账号"></el-table-column>
            <el-table-column prop="userId" label="用户id"></el-table-column>
            <el-table-column prop="realName" label="用户名称"></el-table-column>
            <el-table-column prop="nickName" label="用户昵称"></el-table-column>
            <el-table-column prop="wxNo" label="用户微信"></el-table-column>
            <el-table-column prop="roleName" label="用户角色"></el-table-column>
            <el-table-column
              prop="departmentName"
              label="用户部门"
            ></el-table-column>
            <el-table-column
              prop="platformName"
              label="所属平台"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="rNavToDetail(scope.row.userId)"
                  v-hasAuth:system_authorityUserDetail
                  >详情</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="rNavToEdit(scope.row.userId)"
                  v-hasAuth:system_authorityEditUser
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="rToChangePassword(scope.row.userId)"
                  v-hasAuth:system_authorityChangeUserPassword
                  >修改密码</el-button
                >
                <el-switch
                  v-model="pageAjax.data[scope.$index].status"
                  v-hasAuth:system_authorityChangeUserStatus
                  @change="rChangeUserStatus(pageAjax.data[scope.$index])"
                  :active-value="0"
                  :inactive-value="1"
                  active-color="#13ce66"
                  class="ml20"
                  inactive-color="#ff4949"
                >
                </el-switch>
                <span
                  v-hasAuth:system_authorityUserDetail-system_authorityEditUser-system_authorityChangeUserPassword-system_authorityChangeUserStatus.invert
                  >—</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="c-footer">
          <div class="c-pagination">
            <el-pagination
              layout="prev, pager, next"
              @current-change="rPagingChange"
              @prev-click="rPagingChange"
              @next-click="rPagingChange"
              :current-page="pageAjax.paging.current"
              :page-size="pageAjax.paging.pageSize"
              :total="pageAjax.paging.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- passwordDrawerCp -->
    <el-drawer
      :title="passwordDrawerCp.config.title"
      :visible.sync="passwordDrawerCp.config.visible"
      :direction="passwordDrawerCp.config.direction"
      :size="passwordDrawerCp.config.size"
    >
      <div class="f-qrcodeDrawerCp">
        <div class="n-content">
          <el-row>
            <el-col :span="8" :offset="8">
              <el-form ref="status" label-width="150px">
                <el-form-item label="新密码：">
                  <el-input
                    placeholder="新密码"
                    v-model="passwordDrawerCp.data.newPassword"
                  ></el-input>
                </el-form-item>
                <el-form-item label="确认密码：">
                  <el-input
                    placeholder="确认密码"
                    v-model="passwordDrawerCp.data.passwordAgain"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="rSubmitChangePasswordForm"
                    >提交</el-button
                  >
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getUserList, updateUserStatus } from "@/api/authority.js";
import { resetPassword } from "@/api/user.js";
import { getOffspringnTree } from "@/assets/js/util.js";
import _ from "lodash";

export default {
  name: "system_authorityUserList",
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    orgSupAjax: {
      data: []
    },
    roleSupAjax: {
      data: []
    },
    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          checkStrictly: true,
          emitPath: false
        }
      }
    },
    allPlatformSupAjax: {
      data: []
    },
    alone: {
      searchForm: {
        loading: false,
        data: {
          searchStr: "",
          departmentId: "",
          roleId: "",
          platformId: "",
          type: ""
        }
      },
      userType: [
        {
          type: 0,
          name: "普通用户"
        },
        {
          type: 1,
          name: "管理员"
        },
        {
          type: 2,
          name: "渠道用户"
        }
      ]
    },
    platformCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          checkStrictly: true,
          emitPath: false
        }
      }
    },
    passwordDrawerCp: {
      loading: false,
      config: {
        title: "",
        visible: false,
        direction: "ttb",
        size: "50%"
      },
      data: {
        newPassword: "",
        passwordAgain: ""
      }
    }
  }),
  created() {
    let _that = this;
    _that.getOrgData();
    _that.getRoleData();
    _that.getPlatformData();
    _that.getPageData();
  },
  methods: {
    rChangeUserStatus(v) {
      let _that = this;
      updateUserStatus({ userId: v.userId, status: v.status }).then(resp => {
        let respData = resp.data || {};

        if (respData.code === _that.STATUS.success[0]) {
          _that.$message.success(respData.msg || "获取失败");
          _that.pageAjax.paging.current = --_that.pageAjax.paging.current;
          _that.getPageData();
        } else {
          _that.$message.error(respData.msg || "获取失败");
        }
      });
    },
    rToChangePassword(id) {
      this.passwordDrawerCp.data = {
        newPassword: "",
        passwordAgain: "",
        userId: id
      };
      this.passwordDrawerCp.config.visible = true;
    },
    rSubmitChangePasswordForm() {
      let _that = this;
      let passwordDrawerCpData = _that.passwordDrawerCp.data;
      if (_that.passwordDrawerCp.loading) {
        return;
      }

      if (
        !passwordDrawerCpData.newPassword ||
        !passwordDrawerCpData.passwordAgain
      ) {
        _that.$message.error("新密码、确认密码都不能为空");
        return;
      }
      if (
        passwordDrawerCpData.newPassword != passwordDrawerCpData.passwordAgain
      ) {
        _that.$message.error("新密码和确认密码不相同");
        return;
      }

      resetPassword(passwordDrawerCpData)
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.$message.success(respData.msg || "修改成功");
            _that.passwordDrawerCp.config.visible = false;
          } else {
            _that.$message.error(respData.msg || "修改失败");
          }
        })
        .finally(() => {
          _that.passwordDrawerCp.loading = false;
        });
    },
    rSubmitSearchForm() {
      let _that = this;
      if (_that.pageAjax.loading) {
        return;
      }

      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      _that.getPageData();
    },
    rPagingChange(e) {
      let _that = this;
      _that.pageAjax.paging.current = e - 1;
      _that.getPageData();
    },
    getPageData() {
      let _that = this;
      let searchForm = _that.alone.searchForm;
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }
      let data = { ...searchForm.data };

      // if (searchForm.data.departmentId) {
      //   data.departmentId = searchForm.data.departmentId.pop();
      // }
      data.pageNo = _that.pageAjax.paging.current + 1;
      data.pageSize = _that.pageAjax.paging.pageSize;
      _that.pageAjax.loading = true;
      getUserList({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data.list;
            _that.pageAjax.paging.pages = respData.data.pagination.pages;
            _that.pageAjax.paging.current = respData.data.pagination.current;
            _that.pageAjax.paging.total = respData.data.pagination.total;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
          _that.alone.searchForm.loading = false;
        });
    },
    getOrgData() {
      let _that = this;
      _that.$store.dispatch("getDepartmentList").then(() => {
        let arr = _.cloneDeep(_that.$store.state.departmentList) || [];
        _that.orgSupAjax.data = getOffspringnTree(_.cloneDeep(arr), 0);
      });
    },
    getPlatformData() {
      let _that = this;
      return _that.$store.dispatch("getPlatformList").then(() => {
        let arr =
          _.cloneDeep(
            _that.$store.getters.allPlatformListOffspringnTreeData(2)
          ) || [];
        // arr.unshift({ id: "", name: "全部" });
        _that.allPlatformSupAjax.data = arr;
      });
    },
    getRoleData() {
      let _that = this;
      _that.$store.dispatch("getRoleList").then(() => {
        _that.roleSupAjax.data = _that.$store.state.roleList;
      });
    },
    rNavToCreate() {
      this.$router.push({ name: "system_authorityCreateUser" });
    },
    rNavToDetail(id) {
      this.$router.push({
        name: "system_authorityUserDetail",
        query: {
          id: id
        }
      });
    },
    rNavToEdit(id) {
      this.$router.push({
        name: "system_authorityEditUser",
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
